<script setup>
const url = ref(uni.getStorageSync("url"));
const time = useTime();

onReady(() => {
  openWebview();
});

watch(url, (value) => {
  uni.setStorageSync("url", value);
});

onShow(() => {
  time.start();
});

onHide(() => {
  time.stop();
});

function openWebview() {
  if (url.value) {
    const newUrl = appendDefaultQuery(url.value, {
      uuid: plus.device.uuid,
    });
    const webview = plus.webview.open(newUrl, `_${Date.now()}_`, {
      progress: { color: "#000" },
      errorPage: "/static/error/index.html",
    });
    webview.appendJsFile("/static/api.js");
    webview.addEventListener("loading", () => {
      plus.nativeUI.showWaiting("正在加载中，请耐心等待");
    });
    webview.addEventListener("loaded", () => {
      plus.nativeUI.closeWaiting();
      webview.show();
    });
  }
}
</script>

<template>
  <view class="page">
    <view class="mb-4">
      {{ time.value }}
    </view>
    <view class="address">
      <input v-model="url" class="input" placeholder="请输入地址" />
      <view class="button go" @click="openWebview">前往</view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.page {
  @apply pt-1/12;
  @apply fixed inset-0;
  @apply flex flex-col items-center;

  .address {
    @apply flex;
    @apply w-1/2;
  }

  .input {
    @apply flex-1;
    @apply px-2 py-2;
    @apply b-2 b-solid b-#409eff;
    @apply rounded-tl-2 rounded-bl-2;
  }

  .button {
    @apply flex-none;
    @apply px-5 py-2;
    @apply text-white bg-#409eff;

    &.go {
      @apply rounded-tr-2 rounded-br-2;
    }
  }
}
</style>
